<template>
  <TextSetting :data="data" :disabled="disabled" show-placeholder>
    <WidgetSourceSetting :data="data" label="身份证默认值" :rules="rules" :disabled="disabled">
      <ElInput
        class="el-input__limit-clearable"
        v-model.trim="data.value"
        :disabled="disabled"
        :maxlength="data.text.maxLength"
        placeholder="请输入身份证默认值"
        show-word-limit
        clearable
      />
    </WidgetSourceSetting>
  </TextSetting>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Widget } from '@/models'
import TextSetting from '../input/TextSetting.vue'
import WidgetSourceSetting from '@/components/widget-source/WidgetSourceSetting.vue'

export default defineComponent({
  name: 'FaIdSetting',

  components: { TextSetting, WidgetSourceSetting },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    return {
      rules: [
        {
          validator(rule: object, value: string | number, callback: (e?: Error) => void) {
            const { errorUsing: error } = props.data
            if (value && error) {
              return callback(new Error(error))
            }

            callback()
          },

          trigger: 'blur'
        }
      ]
    }
  }
})
</script>
